<template>
  <!-- 渲染购物车商品 -->
  <div class="cart">
    <template v-if="products.length">
      <van-swipe-cell v-for="prod in products" :key="prod.id">
        <van-card 
        :num="prod.amount" 
        :price="prod.price" 
        :title="prod.title"  
        class="goods-card" 
        :thumb="prod.thumb" >
        <!-- 数量为位置自定义步进器，加减上商品数量 -->
        <template #num>
          <van-stepper v-model="prod.amount" theme="round" button-size="18" /> 
        </template>
        <!-- 缩略图前添加一个复选框 -->

        <template #thumb>
          <van-checkbox v-model="prod.checked"></van-checkbox>
          <div class="van-image" style="width: 100%; height: 100%;">
            <img :src="prod.thumb" class="van-image__img" style="object-fit: cover;">
          </div>
        </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="handleRemove(prod.id)" />
        </template>
      </van-swipe-cell>

      <!-- 提交订单 -->
      <van-submit-bar :price="store.totalMoney" button-text="提交订单">
        <van-checkbox :modelValue="store.allChecked" @click="handleToggleAllChecked">全选</van-checkbox>
        <!-- <van-checkbox :modleValue="store.allChecked">全选</van-checkbox> -->
        <template #tip>
          你的收货地址不支持配送, <span>修改地址</span>
        </template>
      </van-submit-bar> 

    </template>
    <!-- 购物车为空，空提示 -->
    <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
      description="购物车为空, 请选购商品" v-else />
  </div>
</template>
 
<script setup lang="ts">
import { computed } from 'vue';
import useCartStore from '@/store/modules/cart';

const store = useCartStore()

console.log("store",store)

//所有购物车商品
const products = computed(() => store.cart)

//处理删除购物车
const handleRemove = (id: string) => {
  store.removeFromCart(id)
}

// 处理全选复选框点击事件
const handleToggleAllChecked = () =>{
    store.toggleAllChecked(!store.allChecked)

}
</script>
 
<style lang="less" scoped>
FFF .goods-card {
  margin: 0;
  background-color: #FFF;
}

.delete-button {
  height: 100%;
}

.van-submit-bar {
  bottom: 50px;
}
//深度选择器，进行样式穿透
:deep(.van-card__thumb){
  display: flex;
}
.van-checkbox{
  width: 30px;
}
.van-submit-bar__bar .van-checkbox{
  width: 60px;
}

</style>
   